<template>
	<view class="zy-column-full">
		<zy-status-bar></zy-status-bar>
		<scroll-view class="zy-scroll">
			<!-- 广告图 -->
			<zy-banner-mall></zy-banner-mall>
			<!-- 价格 -->
			<view class="zy-row">
				<view class="zy-row-center zy-flex bg-red">
					<view class="zy-text-white-lg-bold" style="font-size: 48rpx;">₱</view>
					<view class="zy-text-white-lg-bold zy-ml" style="font-size: 58rpx;">602.00</view>
				</view>
				<view class="zy-row-center zy-flex bg-yellow">
					<view class="zy-text-white-lg-bold" style="font-size: 48rpx;">₱</view>
					<view class="zy-text-white-lg-bold zy-ml" style="font-size: 58rpx;">5.00</view>
				</view>
			</view>
			<view class="zy-page-padding">
				<!-- 描述 -->
				<view class="zy-text-black-lg zy-mt-lg">Huawei Mate 10 PorscheDesign Factory Unlock…</view>
				<view class="zy-row zy-mt">
					<view class="zy-flex zy-text-gray">Participants:12829</view>
					<view class="zy-flex zy-text-gray">Ends at: 01:08:05</view>
				</view>
				<!-- 时间 -->
				<view class="zy-row zy-mt-lg">
					<view class="zy-flex-width zy-text-gray">Number of participants:</view>
					<view class="zy-flex-width zy-text-gray">Time remsining:</view>
					<zy-button class="zy-flex-width" content="03:44:47" color="black"></zy-button>
				</view>
				
				<view class="zy-row  zy-mt-lg bg-black-hollow">
					<view class="zy-flex-width">
						<view class="zy-text-gray-sm">Disscounts</view>
						<view class="zy-text-gray-sm zy-font-bold zy-mt-sm">90%off</view>
					</view>
					<view class="zy-flex-width zy-column-center">
						<view class="zy-text-main-sm">VIP Subsidy</view>
						<view class="zy-row zy-mt-sm">
							<view class="zy-text-main">₱</view>
							<view class="zy-text-main-lg-bold">102.12</view>
							<view class="zy-text-gray zy-ml">₱</view>
							<view class="zy-text-gray-lg-bold" style="text-decoration: line-through;">105.12</view>
						</view>
					</view>
					<view class="zy-flex-width">
						<view class="zy-row-right zy-text-gray-sm">Incentory</view>
						<view class="zy-row-right zy-text-gray zy-font-bold zy-mt-sm">1
						</view>
					</view>
				</view>
				
				<!-- 四个流程 -->
				<view class="zy-row-top zy-mt bg-yellow-light">
					<view class="zy-flex-width zy-column">
						<view class="zy-row-center" style="height: 80rpx;">
							<image src="@/static/img/mall_slice.png" style="width: 78rpx;" mode="widthFix"></image>
						</view>
						<view class="zy-text-gray zy-mt-sm" style="text-align: center;">Join the snap-uo aft</view>
					</view>
					<zy-line-mall></zy-line-mall>
					<view class="zy-flex-width zy-column">
						<view class="zy-row-center" style="height: 80rpx;">
							<image src="@/static/img/mall_smail.png" style="width: 78rpx;" mode="widthFix"></image>
						</view>
						<view class="zy-text-gray zy-mt-sm" style="text-align: center;">Random selevtion of</view>
					</view>
					<zy-line-mall></zy-line-mall>
					<view class="zy-flex-width zy-column">
						<view class="zy-row-center" style="height: 80rpx;">
							<image src="@/static/img/mall_shop.png" style="width: 74rpx;" mode="widthFix"></image>
						</view>
						<view class="zy-text-gray zy-mt-sm" style="text-align: center;">Winners receive merc</view>
					</view>
					<zy-line-mall></zy-line-mall>
					<view class="zy-flex-width zy-column">
						<view class="zy-row-center" style="height: 80rpx;">
							<image src="@/static/img/mall_payment.png" style="width: 72rpx;" mode="widthFix"></image>
						</view>
						<view class="zy-text-gray zy-mt-sm" style="text-align: center;">Unwinners rwceive a</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- //购物车加减；加入购物车 -->
		<view class="zy-row-center bg-white-rtop">
			<view class="zy-row zy-flex bg-sub-add zy-ml-lg">
				<view class="zy-row-center zy-flex">
					<image src="@/static/img/mall_add.png" style="width: 18rpx;" mode="widthFix"></image>
				</view>
				<view class="zy-row-center zy-flex">
					<view class="zy-text-black-lg-bold">1</view>
				</view>
				<view class="zy-row-center zy-flex">
					<image src="@/static/img/mall_sub.png" style="width: 18rpx;" mode="widthFix"></image>
				</view>
			</view>
			<view class="zy-row-center zy-flex zy-btn-red-r20 zy-text-white zy-mh-lg">
				Add To Cart
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.bg-white-rtop{
	height: 224rpx;
	background-color: #fff;
	border-top-left-radius: 60rpx;
	border-top-right-radius: 60rpx;
}
.bg-sub-add{
	height: 112rpx;
	border-radius: 28rpx;
	border: 2rpx solid #F6F6F6;
}
.bg-red{
	height: 128rpx;
	background: $zy-color-main;
}
.bg-yellow{
	height: 128rpx;
	background: $zy-color-yellow;
}
.bg-yellow-light{
	padding: 30rpx 0;
	background: #FFF4E2;
	border-radius: 15rpx;
}
.bg-black-hollow{
	border-radius: 25rpx;
	border: 2rpx solid #3B3B3B;
	padding: 30rpx;
}
</style>
